import React, { useState, useEffect } from 'react'
import { Slider, Button } from 'antd'

const SliderProess = () => {
  const [SliderValue, setSliderValue] = useState([10, 30])
  const [show, setShow] = useState(null)

  useEffect(() => {
    setTimeout(() => {
      if (show && SliderValue[0] < SliderValue[1]) {
        setSliderValue([SliderValue[0] + 1, SliderValue[1]])
        setShow({})
      }
    }, 300)
  }, [show])

  const onChange = (value) => {
    setSliderValue(value)
  }
  const start = () => {
    setShow({})
  }

  return (
    <div>
      <Slider range value={SliderValue} onChange={onChange} />
      <Button onClick={start}>开始</Button>
    </div>
  )
}

export default SliderProess
